<template>
  <el-dialog :title="title" v-model="open" :close-on-click-modal="false" width="70%" append-to-body>
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="线边仓" prop="storehouseCode">
        <el-select  clearable filterable v-model="queryParams.storehouseCode" style="width: 240px">
          <el-option
            v-for="(item, index) in storehouseList"
            :key="index"
            :value="item.storehouseCode"
            :label="item.storehouseName"
          >
            <span>{{ item.storehouseName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品批号" prop="batchNo">
        <el-input
          v-model="queryParams.batchNo"
          placeholder="请输入产品批号"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="matCode">
        <el-input
          v-model="queryParams.matCode"
          placeholder="请输入产品编号"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="matName">
        <el-input
          v-model="queryParams.matName"
          placeholder="请输入产品名称"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品类别" prop="type">
        <el-input
          v-model="queryParams.type"
          placeholder="请选择产品类别"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableData"
      maxHeight="500px"
      border
      show-overflow-tooltip
      highlight-current-row
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="multiple"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        label="产品编号"
        align="center"
        prop="code"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        label="产品名称"
        align="center"
        prop="name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="产品分类"
        align="center"
        prop="typeName"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="工厂"
        align="center"
        prop="factory"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="单位"
        align="center"
        prop="measureUnit"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="规格"
        align="center"
        prop="packages"
        :show-overflow-tooltip="true"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="MatDialog">
import { listMat } from "@/api/base/material/MaterialApi";
import { listStorehouse } from "@/api/storehouse/storehouse";
import { ref, reactive, toRefs,watch } from "vue";
const props = defineProps([
  "factory",
  "line",
  "workshop",
  "section",
  "multiple",
]);
const open = defineModel("show");
const loading = ref(true);
const showSearch = ref(true);
const tableData = ref([]);
const selectData = ref([]);
const storehouseList = ref([]);
const total = ref(0);
const title = ref("");
const currentRow = ref();
const queryRef = ref("queryRef");
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    typeName: "成品,半成品",
  },
});
const handleCurrentChange = (val) => {
  currentRow.value = val;
};
const { factory, workshop, line, section, multiple } = toRefs(props);
watch(
  () => props,
  (newValue, oldValue) => {
    console.log(newValue, oldValue)
    getStorehouseList();
  },
  {
    deep: true,
  }
);
const { queryParams } = toRefs(data);

const emit = defineEmits(["change"]);

function getStorehouseList() {
  listStorehouse({
    factoryCode: factory.value,
    workshopCode: workshop.value,
    lineCode: line.value,
    sectionCode: section.value,
    pageNum: 1,
    pageSize: 1000,
  }).then((res) => {
    storehouseList.value = res.rows;
  });
}

/** 查询字典类型列表 */
function getList() {
  loading.value = true;
  listMat(queryParams.value).then((response) => {
    tableData.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  selectData.value = selection;
}

function submitForm() {
  open.value = false;
  if (multiple.value) {
    emit("change", selectData.value);
  } else {
    emit("change", currentRow.value);
  }
}

getList();
</script>

<style lang="scss" scoped></style>
